<template>
  <div class="collect">
    <h3>收藏</h3>
    <div v-for="(item,i) in like_list" :key="i" class="like_text">
      <p>{{ item.article_title }}<button @click="removeLikeFn(item.article_id,item.user_id)">取消收藏</button></p>
      <hr>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { useRoute } from 'vue-router'
  import { likeFn,removelikeFn } from '../api/index'
  import { showDialog } from 'vant';
  let like_list = ref([]);

  // 定义函数获取收藏列表
  const likeListFn = async ()=> {
      // let token = localStorage.getItem("TOKEN")
      await likeFn().then(
          (content:any)=>{
              // console.log(content)
              let {result, code} = content;
              // console.log(result,code)
              if(code == 200) {
                like_list.value = result;
                console.log(like_list.value);
              }
          }
      )
  }
  likeListFn();

  // 定义函数获取收藏列表
  const removeLikeFn = async (article_id,user_id)=> {
    // let token = localStorage.getItem("TOKEN")
    await removelikeFn({article_id:article_id,user_id:user_id}).then(
        (content:any)=>{
            console.log(content)
            let {code} = content;
            // console.log(result,code)
            if(code == 200) {
              // 取消收藏成功
              showDialog({
                title: '',
                message:`取消收藏成功`,
              }).then(() => {
              });
              likeListFn()
            }
            else{
              // 取消收藏失败
              showDialog({
                title: '',
                message:`取消收藏失败`,
              }).then(() => {
              });
            }
        }
    )
  }
  


</script>

<style lang="less" scoped>
  .collect{
    margin: 10px;
    h3{
      text-align: center;
      margin-bottom: 20px;
    }
    .like_text{
      p{
        font-size: 16px;
        color: #ccc;
        padding: 5px 0;
        position: relative;
        button{
          background-color: transparent;
          color: #000;
          position: absolute;
          right: 0;
          font-size: 12px;
        }
      }
    }
  }
</style>
